<template>
  <div class='premier'>
    <div class="left">
      <div class="news-wrap">
        <div class="team">
          <div class="top">
            <img src="../assets/img/game.png" alt="">
            <span>未开始</span>
          </div>
          <p class="game-time">2020-05-02 22:00 第36轮</p>
          <div class="icon">
            <div class="icon-left">
              <img src="../assets/img/team1.png" alt="">
              <p class="name">纽卡斯尔</p>
              <span>0</span>
            </div>
            <div class="icon-right">
              <img src="../assets/img/team2.png" alt="">
              <p>热刺</p>
              <span>0</span>
            </div>
          </div>
          <div class="btn">图文直播</div>
        </div>
        <div class="new-box">
          <h4>
            <a :href="keyUrl+all[0].url">
              {{all[0].title}}
            </a>
          </h4>
          <ul>
            <li v-for='(item,index) in mains' :key='index'>
              <a :href="keyUrl+item.url">
                {{item.title}}
              </a></li>
          </ul>
        </div>
      </div>
      <div class="news-wrap">
        <div class="team">
          <div class="top">
            <img src="../assets/img/game.png" alt="">
            <span>未开始</span>
          </div>
          <p class="game-time">2020-05-02 22:00 第36轮</p>
          <div class="icon">
            <div class="icon-left">
              <img src="../assets/img/team1.png" alt="">
              <p class="name">纽卡斯尔</p>
              <span>0</span>
            </div>
            <div class="icon-right">
              <img src="../assets/img/team2.png" alt="">
              <p>热刺</p>
              <span>0</span>
            </div>
          </div>
          <div class="btn">图文直播</div>
        </div>
        <div class="new-box">
          <h4>
            <a :href="keyUrl+all[11].url">
              {{all[11].title}}
            </a>
          </h4>
          <ul>
            <li v-for='(item,index) in mains2' :key='index'>
              <a :href="keyUrl+item.url">
                {{item.title}}
              </a></li>
          </ul>
        </div>
      </div>
      <div class="news-wrap">
        <div class="team">
          <div class="top">
            <img src="../assets/img/game.png" alt="">
            <span>未开始</span>
          </div>
          <p class="game-time">2020-05-02 22:00 第36轮</p>
          <div class="icon">
            <div class="icon-left">
              <img src="../assets/img/team1.png" alt="">
              <p class="name">纽卡斯尔</p>
              <span>0</span>
            </div>
            <div class="icon-right">
              <img src="../assets/img/team2.png" alt="">
              <p>热刺</p>
              <span>0</span>
            </div>
          </div>
          <div class="btn">图文直播</div>
        </div>
        <div class="new-box">
          <h4>
            <a :href="keyUrl+all[22].url">
              {{all[22].title}}
            </a>
          </h4>
          <ul>
            <li v-for='(item,index) in mains3' :key='index'>
              <a :href="keyUrl+item.url">
                {{item.title}}
              </a></li>
          </ul>
        </div>
      </div>

    </div>
    <div class="right">
      <div class="tit">
        <span>精彩图文</span>
        <router-link tag="span" :to='{name:"list",params:{api:"getYcRead"}}' class="more">+更多</router-link>
      </div>
      <ul>
        <li v-for='(item,index) in reads' :key='index'>
          <a :href="keyUrl+item.url">
            <img :src="keyUrl+item.image" alt="">
            <p>{{item.title}}</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {
    getYcMain,
    getYcRead
  } from '@/request/api'
  export default {
    data() {
      return {
        mains: [],
        mains2: [],
        mains3: [],
        reads: [],
        all: []
      };
    },
    methods: {},
    created() {
      getYcMain().then(res => {
        this.all = res.data;
        this.mains = res.data.slice(1, 11);
        this.mains2 = res.data.slice(12, 22);
        this.mains3 = res.data.slice(23, 33);
      })
      getYcRead().then(res => {
        this.reads = res.data.slice(0, 5);
      })
    }
  };

</script>

<style lang='scss' scoped>
  .premier {
    width: 940px;
    margin: auto;
    display: flex;
    justify-content: space-around;

    .left {
      .news-wrap {
        width: 618px;
        height: 300px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        display: flex;
        position: relative;
        margin-bottom: 28px;

        .team {
          width: 186px;
          height: 276px;
          background: rgba(237, 240, 245, 1);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;

          .top {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(95, 96, 96, 1);
          }

          .game-time {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(95, 96, 96, 1);
          }

          .icon {
            display: flex;
            justify-content: space-between;

            .icon-left,
            .icon-right {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin: 0 10px;

            }

            img {
              width: 48px;
              height: 48px;
              margin-bottom: 12px;
            }

            p {
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: rgba(106, 118, 149, 1);
            }

            span {
              font-size: 44px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: rgba(93, 93, 93, 1);
            }


          }

          .btn {
            width: 66px;
            height: 22px;
            background: rgba(83, 98, 132, 1);
            font-size: 11px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 22px;
            text-align: center;
          }
        }

        .new-box {
          h4 {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(197, 34, 21, 1);
            line-height: 36px;
            padding-left: 24px;

            a {
              color: rgba(197, 34, 21, 1);

            }
          }

          ul {
            padding-left: 36px;

            li {
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: rgba(63, 63, 63, 1);
              line-height: 26px;
              list-style: square;
            }

            li:first-of-type {
              color: rgba(197, 34, 21, 1);
            }
          }
        }

        .more {
          width: 44px;
          height: 14px;
          border: 1px solid rgba(116, 116, 116, 1);
          font-size: 10px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(63, 63, 63, 1);
          line-height: 14px;
          text-align: center;
          position: absolute;
          bottom: 10px;
          right: 42px;
        }

      }
    }

    .right {
      width: 282px;

      .tit {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 30px;

        span:nth-of-type(1) {
          font-size: 22px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(63, 63, 63, 1);
        }

        span:nth-of-type(2) {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(63, 63, 63, 1);

        }
      }

      ul {
        width: 282px;

        li {
          width: 282px;
          margin-bottom: 20px;

          p {
            max-width: 282px;
            font-size: 13px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(63, 63, 63, 1);
            overflow-x: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          img {
            width: 282px;
            height: 140px;
            margin-bottom: 10px;
          }
        }
      }
    }
  }

</style>
